<template>
    <a-menu :mode="mode" v-model:selectedKeys="state.selectedKeys" v-model:open-keys="state.openKeys" theme="dark"
        :items="route_items" @select="selectRoute">
    </a-menu>
</template>
<script lang="ts" setup>
import { eMenuType } from '@/interface/enum';
import { iRouteMeta } from '@/interface/iRouteInfo';
import { useMenus } from '@/store/menus';
import { ItemType } from 'ant-design-vue';
// import dayjs from 'dayjs';
import { onMounted, reactive, watch } from 'vue';
import { RouteLocationNormalizedLoaded, RouteRecordRaw, useRoute, useRouter } from 'vue-router';

withDefaults(defineProps<{ mode?: 'horizontal' | 'vertical' | "inline"; }>(), { mode: "inline" });

const router = useRouter();
const route = useRoute();
const storeMenus = useMenus();
const route_items = reactive<ItemType[]>([

])
const state = reactive<{ [key: string]: string[] }>({
    openKeys: [],
    selectedKeys: [],
});

const recursionSelectedKey = (routes: Array<RouteRecordRaw> | undefined, current_path: string) => {
    if (!routes) return;
    for (let index = 0; index < routes.length; index++) {
        const route = routes[index];
        if (route.path === current_path) {
            const meta = route.meta as iRouteMeta;
            if (meta.menu_show) {
                state.selectedKeys = [current_path];
                return
            } else {
                state.selectedKeys = [meta.parentPath]
                return
            }
        } else if (route.children && route.children.length > 0) {
            recursionSelectedKey(route.children, current_path);
        }
    }


}
const dynamic_route = (r: RouteLocationNormalizedLoaded) => {
    const matched = r.matched;
    for (const route of matched) {
        if (route.meta && route.meta.menu_type === eMenuType.MENU) {
            state.openKeys.push(route.path);
            recursionSelectedKey(route.children, r.path)
            break;
        }
    }
}

const selectRoute = (a: any) => {
    router.push(a.key)
}


watch(route, newVal => {
    dynamic_route(newVal);
});
watch(
    () => storeMenus.asyncRoutes,
    () => {
        //TODO 有新增权限路由的时候，需要重新刷新菜单
        // fillRoute(val);
    },
    {
        deep: true,
        immediate: true,
    }
);

const recursionRoute = (routes: Array<RouteRecordRaw> | undefined): Array<ItemType> | undefined => {
    if (!routes || routes.length === 0) return undefined
    else {
        const arr: Array<ItemType> = []
        for (const r of routes) {
            const meta = r.meta as iRouteMeta | null;
            if (meta && meta.menu_show) {
                const item: any = {
                    key: r.path,
                    label: meta.title,
                    title: (meta.title || "") as string,
                    children: meta.menu_type === eMenuType.MENU ? recursionRoute(r.children) : undefined
                }
                arr.push(item)
            }
        }
        return arr;
    }
}


const fillRoute = (routes: Array<RouteRecordRaw>) => {
    route_items.splice(0, route_items.length)
    routes.forEach(r => {
        if (r.meta && r.meta.menu_type === eMenuType.MENU) {
            if (r.meta.menu_show) {
                const item: any = {
                    key: r.path,
                    label: r.meta.title,
                    title: (r.meta.title || "") as string,
                    children: recursionRoute(r.children)
                }
                route_items.push(item)
            }
        }
    })
}

onMounted(() => {
    dynamic_route(route);
    const all_routes = router.getRoutes()
    fillRoute(all_routes)

});
</script>
<style lang="less">
.ant-layout-sider-children {
    background: #141414;
}
</style>
  